<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>腾飞健康管理平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/oksub.css">
</head>
<body>
<div class="ok-body">
    <!--模糊搜索区域-->
    <div class="layui-row">
        <div class="layui-input-inline layui-col-md5">
            <input class="layui-input " placeholder="根据员工号搜索" autocomplete="off" name="examinerId" id="searchInput" maxlength="12">
        </div>
        <div class="layui-input-inline">
            <button class="layui-btn" lay-filter="search" id="search">搜索</button>
        </div>
    </div>
    <!--数据表格-->
    <table class="layui-hide" id="examinerListId" lay-filter="tableFilter"></table>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script>
    layui.use(["element", "table", "form", "okLayer", "okUtils"], function () {
        let table = layui.table;
        let form = layui.form;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let $ = layui.jquery;

        let userTable = table.render({
            elem: '#examinerListId',
            id: "examinerListReload",
            url: "/getExaminerList",
            limit: 5,
            limits: [5, 10, 15],
            page: true,
            toolbar: true,
            toolbar: "#toolbarTpl",
            size: "sm",
            method: "post",
            request: {
                pageName: "currentPageNum",
                limitName: "pageSize"
            },
            response: {
                countName: "totalCount",
                dataName: "data",
                msgName: "msg"
            },
            cols: [
                [
                    {type: "checkbox", fixed: "left"},
                    {field: "examinerId", title: "员工号", width: 120, sort: true, id: "examinerId", align: "center"},
                    {field: "examinerName", title: "姓名", width: 90, align: "center"},
                    {field: "role", title: "角色", width: 60, align: "center"},
                    {field: "office", title: "科室", width: 100, align: "center"},
                    {field: "duty", title: "职务", width: 100, align: "center"},
                    {field: "telephone", title: "电话", width: 110, align: "center"},
                    {field: "email", title: "邮箱", width: 160, align: "center"},
                    {
                        field: "lastLoginTime",
                        title: "上次登录时间",
                        width: 140,
                        sort: true,
                        templet: "#datetimeTpl",
                        align: "center"
                    },
                    {field: "status", title: "状态", width: 90, align: "center", templet: "#statusTpl"},
                    {title: "操作", align: "center", templet: "#operationTple"}
                ]
            ],
            done: function (res, curr, count) {
                console.info(res, curr, count);
            }
        });

        $("#search").on("click", function(data){
            let searchInput=$("#searchInput");
            table.reload("examinerListReload", {
                page: {
                    curr: 1
                },
                where: {
                    searchInput: searchInput.val()
                },
                url: "/fuzzySearchByExaminerId",
                method: "get",
            });
        });


        table.on("toolbar(tableFilter)", function (obj) {
            switch (obj.event) {
                case "batchEnabled":
                    batchEnabled();
                    break;
                case "batchDisabled":
                    batchDisabled();
                    break;
                case "batchDel":
                    batchDel();
                    break;
                case "examinerRegiste":
                    examinerRegiste();
                    break;
            }
        });

        function batchEnabled() {
            okLayer.confirm("确定要批量启用吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("examinerListReload");
                console.log(checkStatus.data.length);
                let examinerIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        examinerIds = examinerIds + checkStatus.data[i].examinerId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }
                if (examinerIds != "") {
                    okUtils.ajax("/batchEnabledExaminers", "post", {examinerIds: examinerIds}, true)
                        .done(function (responseResult) {
                            console.log(responseResult);
                            okUtils.tableSuccessMsg(responseResult.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function batchDisabled() {
            okLayer.confirm("确定要批量禁用吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("examinerListReload");
                console.log(checkStatus.data.length);
                let examinerIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        examinerIds = examinerIds + checkStatus.data[i].examinerId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }

                if (examinerIds != "") {
                    okUtils.ajax("/batchDisenabledExaminers", "post", {examinerIds: examinerIds}, true)
                        .done(function (responseResult) {
                            console.log(responseResult);
                            okUtils.tableSuccessMsg(responseResult.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function batchDel() {
            okLayer.confirm("确定要批量删除吗？", function (index) {
                layer.close(index);
                let checkStatus = table.checkStatus("examinerListReload");
                let examinerIds = "";
                if (checkStatus.data.length > 0) {
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        examinerIds = examinerIds + checkStatus.data[i].examinerId + ",";
                    }
                } else {
                    layer.msg("未选择有效数据", {offset: "t", anim: 6});
                }

                if (examinerIds != "") {
                    okUtils.ajax("/batchDeleteExaminers", "post", {examinerIds: examinerIds}, true)
                        .done(function (responseResult) {
                            console.log(responseResult);
                            okUtils.tableSuccessMsg(responseResult.msg);
                        })
                        .fail(function (error) {
                            console.log(error)
                        });
                }
            });
        }

        function examinerRegiste() {
            okLayer.open("注册员工", "/examinerRegiste", "90%", "90%", null, function () {
                userTable.reload();
            })
        }

        table.on("tool(tableFilter)", function (obj) {
            let data = obj.data;
            switch (obj.event) {
                case "show":
                    show(data);
                    break;
                case "del":
                    del(data.examinerId);
                    break;
            }
        });

        /*启用|停用开关的实现方法
        * 参数；disabled: 点击开关后的状态值；msg：用以在弹出框提醒用户*/
        form.on("switch(statusSwitch)", function (data) {
            let status = data.elem.checked;
            let examinerId = data.value;

            console.log("examinerId:" + examinerId);

            let msg;
            if (status) {
                msg = "启用";
            } else {
                msg = "禁用";
            }

            layer.open({
                content: "确定要<span style='color:red'>" + msg + "</span>账号 " + examinerId + " 吗？",
                btn: ['确定', '取消'],
                yes: function (index) {
                    okUtils.ajax("/updateExaminerStatus", "get", "status=" + status + "&examinerId=" + examinerId, true)
                        .done(function (responseResult) {
                            okLayer.greenTickMsg(responseResult.msg);
                        })
                        .fail(function (error) {
                            console(error);
                        });
                    layer.close(index);
                },
                btn2: function (index) {
                    data.elem.checked = !status;
                    form.render();
                    layer.close(index);
                },
                cancel: function () {
                    data.elem.checked = !status;
                    form.render();
                }
            });

        });

        function del(examinerId) {
            okLayer.confirm("确定要删除账号<span style='color:red'>" + examinerId + "</span>吗？", function () {
                okUtils.ajax("/deleteExaminerByExaminerId", "get", {examinerId: examinerId}, true)
                    .done(function (responseResult) {
                        console.log(responseResult);
                        okUtils.tableSuccessMsg(responseResult.msg);
                    }).fail(function (error) {
                    console.log(error)
                });
            })
        }

        function show() {
            layer.msg("查看");
        }
    })
</script>
<!-- 头工具栏模板 -->
<script type="text/html" id="toolbarTpl">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="batchEnabled">批量启用</button>
        <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="batchDisabled">批量禁用</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="examinerRegiste">注册员工</button>
    </div>
</script>

<!-- 启用|禁用模板 -->
<script type="text/html" id="statusTpl">
    <input type="checkbox" lay-skin="switch" name="status" lay-text="启用|禁用" lay-event="statusSwitch"
           lay-filter="statusSwitch" {{ d.status==true?'checked':''}} value={{ d.examinerId}} style="font-size: 10px">
</script>

<!-- 查看|删除模板 -->
<script type="text/html" id="operationTple">
    <div class="layui-btn-container">
        <span class="layui-btn layui-btn-normal layui-btn-xs" lay-event="show"
              style="padding-right: 5px;margin-right: 5px">查看</span>
        <span class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
              style="padding-right: 5px;margin-right: 5px">删除</span>
    </div>
</script>

<!--datetime模板-->
<script type="text/html" id="datetimeTpl">
    <div>
        {{ layui.util.toDateString(d.lastLoginTime, "yyyy-MM-dd HH:mm:ss")}}
    </div>
</script>

</body>
</html>
